<script setup>
import { ref } from 'vue'

const emit = defineEmits(['add-item'])
const newItem = ref({
  title: '',
  price: 0,
  description: ''
})

const handleSubmit = () => {
  if (newItem.value.title.trim()) {
    emit('add-item', {
      ...newItem.value,
      id: Date.now(),
      price: parseFloat(newItem.value.price)
    })
    newItem.value = { title: '', price: 0, description: '' }
  }
}
</script>

<template>
  <form @submit.prevent="handleSubmit" class="item-form">
    <input
      v-model="newItem.title"
      type="text"
      placeholder="商品名称"
      required
    >
    <input
      v-model.number="newItem.price"
      type="number"
      placeholder="价格"
      min="0"
      step="0.1"
      required
    >
    <textarea
      v-model="newItem.description"
      placeholder="商品描述"
    ></textarea>
    <button type="submit">发布商品</button>
  </form>
</template>

<style scoped>
.item-form {
  display: grid;
  gap: 1rem;
  margin-top: 2rem;
}

input, textarea, button {
  padding: 0.8rem;
  border: 1px solid #ddd;
  border-radius: 4px;
}

button {
  background: #42b983;
  color: white;
  border: none;
  cursor: pointer;
  transition: background 0.3s;
}

button:hover {
  background: #3aa876;
}
</style>